<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head th:replace="common/head::head">
</head>
<body>
<div class="layui-collapse">
    <div class="layui-colla-item">
        <h2 class="layui-colla-title" style="color: orangered">提示</h2>
        <div class="layui-colla-content layui-show">
            Tomcat管理功能使用建议：
            <br>1.Windows下启动会存在控制台弹窗和cmd命令弹出，控制台弹窗关闭则Tomcat关闭，建议修改Tomcat的bin目录下：
            <br>【setclasspath.bat】文件末尾81行左右的 【set _RUNJAVA="%JRE_HOME%\bin\java.exe"】
            <br>==> 【set _RUNJAVA="%JRE_HOME%\bin\javaw.exe"】 则后台运行不弹出控制台弹窗，cmd弹窗可关闭
            <br>2.Tomcat 管理功能还不健全，请生产环境谨慎使用，需测试环境多加测试
            <br>3.Tomcat新增是指 配置服务器已有Tomcat信息，配置里面的 端口号实际是Tomcat的server.xml的端口配置
        </div>
    </div>
</div>
<div class="layui-row">
    <button onclick="editTomcat('');" class="layui-btn layui-btn-sm">添加Tomcat
    </button>
    <button onclick="refreshList();" class="layui-btn layui-btn-sm">刷新列表</button>
</div>


<div class="layui-collapse" th:unless="${#lists.isEmpty(array)}" style="margin: 10px;">
    <div class="layui-colla-item" th:each="item : ${array}">
        <div class="layui-colla-title">
            <div th:id="'data-title-'+${item.id}">
                [[${item.name}]]
                <div th:data-icon="${item.id}"
                     style="height: 10px; width: 10px; border-radius: 5px; display: inline-block;"></div>
            </div>
            <div class="layui-layout-right" style="padding-right: 15px;">
                <button op="log" th:data-id="${item.id}" th:data-name="${item.name}" class="layui-btn layui-btn-sm ">
                    查看日志
                </button>

                <button op="edit" th:data-id="${item.id}"
                        th:data-name="${item.name}" class="layui-btn layui-btn-sm ">
                    编辑
                </button>

                <button th:id="'uploadFile_'+${item.id}"
                        style="margin-right: 10px;" class="layui-btn layui-btn-sm">
                    <i class="layui-icon">&#xe67c;</i>上传WAR
                </button>


                <button op="start" th:data-op="${item.id}" th:data-id="${item.id}" th:data-name="${item.name}"
                        class="layui-btn layui-btn-sm">
                    启动
                </button>
                <button op="stop" th:data-op="${item.id}" th:data-id="${item.id}" th:data-name="${item.name}"
                        class="layui-btn layui-btn-sm layui-btn-danger">
                    停止
                </button>
                <button op="restart" th:data-op="${item.id}" th:data-id="${item.id}" th:data-name="${item.name}"
                        class="layui-btn layui-btn-sm  layui-btn-danger">
                    重启
                </button>
            </div>
        </div>
        <div class="layui-colla-content layui-show">
            <table class="table-tomcat" th:id="'table_'+${item.id}" th:lay-filter="'table_'+${item.id}"></table>
        </div>
        <script type="text/javascript">
            asyncFn.push(function () {
                config.id = 'table_[[${item.id}]]';
                config.elem = '#table_[[${item.id}]]';
                config.where = {
                    id: "[[${item.id}]]"
                };
                tableRender(config);

                // 表格工具条事件
                table.on('tool(table_[[${item.id}]])', function (obj) {
                    var data = obj.data;
                    var event = obj.event;
                    if ('start' === event) {
                        tomcatProjectManage(data, '[[${item.id}]]', 'start');
                    } else if ('stop' === event) {
                        // 停止项目
                        tomcatProjectManage(data, '[[${item.id}]]', 'stop');
                    } else if ('reload' === event) {
                        // 重启项目
                        tomcatProjectManage(data, '[[${item.id}]]', 'reload');
                    } else if ('delete' === event) {
                        // 删除项目
                        tomcatProjectManage(data, '[[${item.id}]]', 'undeploy');
                    } else if ('manage' === event) {
                        tabChange({
                            id: "manage_[[${item.id}]]_" + data.path,
                            url: '/node/tomcat/manage?id=[[${item.id}]]&path=' + data.path,
                            title: data.path + ' - 管理',
                        });
                    }
                });
                getTomcatStatus('[[${item.id}]]');
                uploadRender({
                    elem: '#uploadFile_[[${item.id}]]',
                    accept: 'file',
                    data: {
                        id: '[[${item.id}]]'
                    },
                    multiple: false,
                    exts: 'war',
                    acceptMime: '.war',
                    url: './uploadWar',
                    before: function () {
                        layer.load(1, {
                            shade: [0.5, '#fff'] //0.1透明度的白色背景
                        });
                    },
                    done: function (res, index, upload) {
                        layer.msg(res.msg);
                        setTimeout(function () {
                            layer.closeAll();

                        }, 2000);
                    },
                    error: function () {
                        layer.closeAll();
                        layer.msg('上传失败');
                    }
                });
            })
        </script>
    </div>
</div>

<h1 align="center" th:if="${#lists.isEmpty(array)}">还没有任何Tomcat，请先添加Tomcat</h1>

<script type="text/html" id="toolbar_op">
    <a href="javascript:;" class="layui-btn  layui-btn-sm" lay-event="manage">管理</a>

    {{# if (d.status == "stopped") { }}
    <a href="javascript:;" class="layui-btn  layui-btn-sm" lay-event="start">启动</a>
    {{# } else if (d.status == "running") { }}
    <a href="javascript:;" class="layui-btn  layui-btn-sm layui-btn-warm" lay-event="stop">停止</a>
    <a href="javascript:;" class="layui-btn  layui-btn-sm layui-btn-warm" lay-event="reload">重启</a>
    {{# } }}
    <a href="javascript:;" class="layui-btn  layui-btn-sm layui-btn-danger"
       lay-event="delete">删除</a>

</script>
</body>
<script type="text/javascript">
    var config = {
        cols: [
            {field: 'path', title: '项目路径', width: "25%"},
            {
                field: 'status', title: '运行状态', width: "25%", templet: function (d) {
                    return d.status == 'running' ? '已运行' : '已停止';
                }
            },
            {field: 'session', title: 'Session个数', width: "20%"},
            {title: '操作', toolbar: '#toolbar_op'}
        ],
        url: "./getTomcatProject",
        loading: true,
        response: {
            statusCode: 200
        },
        done: function (data) {
        }
    };

    function refreshList() {
        window.location.reload();
    }

    function execTomcatOp(id, cmd) {
        loadingAjax({
            url: './' + cmd,
            data: {
                id: id
            },
            success: function (data) {
                layer.msg(data.msg);
                getTomcatStatus(id);
            }
        });
    }

    function loadSuccess() {
        // 点击事件
        $("button[op]").click(function (e) {
            layui.stope(e);
            var id = $(this).attr("data-id");
            var name = $(this).attr('data-name');
            var op = $(this).attr("op");
            if ("goIn" == op) {
                top.layer.msg('加载项目中..', {
                    icon: 16,
                    shade: 0.2,
                    time: 100000000
                });
                top.location.href = $(this).attr("url");
                return false;
            }
            if ("edit" == op) {
                editTomcat(id);
                return false;
            }

            if ("start" == op) {
                // 启动tomat
                execTomcatOp(id, op);
            }

            if ("log" == op) {
                // tomat 日志管理
                tabChange({
                    id: "log_manage_" + id,
                    url: '/node/tomcat/console?id=' + id,
                    title: name + ' - 日志管理',
                });
            }

            if ("stop" == op) {
                // 停止tomat
                layer.confirm('确定停止Tomcat - ' + name + '?', {
                    btn: ['确定', '取消']
                }, function (index) {
                    layer.close(index);
                    execTomcatOp(id, op);
                });
            }
            if ("restart" == op) {
                // 启动tomatre
                layer.confirm('确定重启Tomcat - ' + name + '?', {
                    btn: ['确定', '取消']
                }, function (index) {
                    layer.close(index);
                    execTomcatOp(id, op);
                });
            }
            return false;
        });


    }

    // tomcat项目管理
    function tomcatProjectManage(data, id, op) {
        var tip = {
            'stop': '确定停止项目' + data.path + '吗?',
            'reload': '确定重启项目' + data.path + '吗?',
            'undeploy': '注意，您正在删除项目' + data.path + '，确定删除吗?',
        }

        if (tip[op]) {
            layer.confirm(tip[op], {
                icon: 8,
                btn: ['确定', '取消']
            }, function (index) {
                layer.close(index);
                loadingAjax({
                    url: './tomcatProjectManage',
                    data: {
                        id: id,
                        path: data.path,
                        op: op
                    },
                    success: function (data) {
                        layer.msg(data.msg);

                        if (200 == data.code) {
                            table.reload('table_' + id);
                        }
                    }
                });
            });
        } else {
            loadingAjax({
                url: './tomcatProjectManage',
                data: {
                    id: id,
                    path: data.path,
                    op: op
                },
                success: function (data) {
                    layer.msg(data.msg);

                    if (200 == data.code) {
                        table.reload('table_' + id);
                    }
                }
            });
        }
    }

    // 查询tomcat运行状态
    function getTomcatStatus(id) {
        loadingAjax({
            url: './getTomcatStatus',
            data: {
                id: id
            },
            success: function (data) {
                $('[data-op="' + id + '"]').hide();
                if (200 == data.code) {
                    if (data.data == 0) {
                        $('[data-op="' + id + '"][op="start"]').show();
                        $('[data-icon="' + id + '"]').css('background-color', '#ff0000');
                        $('#data-title-' + id).attr('title', '已停止');
                    } else {
                        $('[data-op="' + id + '"][op="stop"],[data-id="' + id + '"][op="restart"]').show();
                        $('[data-icon="' + id + '"]').css('background-color', '#05ff2d');
                        $('#data-title-' + id).attr('title', '已运行');
                    }
                    table.reload('table_' + id);
                }
            }
        });
    }

    function editTomcat(id) {
        layerOpen({
            type: 2,
            title: id == '' ? '添加Tomcat' : '修改Tomcat信息',
            shade: 0.8,
            area: ['80%', '60%'],
            content: 'edit.html?id=' + id
        });
    }
</script>
</html>